<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="assets/lib/bootstrap/css/bootstrap.min.css" />
	<body>
		<style>
			.input span {
				background-color: blue;
				color: white;

			}

			.content {
				outline: 0;
			}
		</style>
		<div class="container">
			<div class="input  p-2 border">
				<!-- <span class="big p-2 m-1">你好
					<span class="icon">X</span>
				</span> -->
				<input type="text" class="content w-50 p-2 border-0 " value="" placeholder="请输入标签,多个标签以逗号相隔">
			</div>


		</div>
		<script>
			// 输入文字,键盘enter按下,执行文字变成标签的命令
			var oInput = document.querySelector('.input')
			var oContent = document.querySelector('.content');
			var oBig = document.querySelector('.big')
			var oIcon = document.querySelector('.icon')

			oInput.onkeydown = function(e) {
				var theEvent = window.event || e;
				var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
				if (code == 13) {
					// 输入的值
					text = oContent.value;

					if (text === '') {
						alert('请输入内容')
					} else {
						// 如果有逗号的话，隔开
						num = oContent.value.split('，');
						num.forEach(function(e) {
							if (!(e==='')) {
								var comment = `<span class="big p-2 m-1">${e}
					<span class="icon">X</span></span>`
							oInput.insertAdjacentHTML('afterbegin', comment);
							}
							
						})

						oContent.value = '';
					}

				}
				
			}
			// 删除标签
				oInput.onclick = function(event) {
					var measure = event.target.matches('.icon');
					console.log(measure)
					if (measure) {
						event.target.closest('.big').remove();
					}
				}
		</script>
	</body>
</html>
